/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { Image, StyleSheet, View } from 'react-native';
import React, { useState } from 'react';
import { useAvoidArea } from './AvoidAreaContext';

const GamePage = (): JSX.Element => {
    const localImages = [
        require('../asset/yellowBird.png'),
        require('../asset/greenBird.png'),
        require('../asset/purpleBird.png'),
        require('../asset/redBird.png'),
        require('../asset/whiteBird.png'),
        require('../asset/blueBird.png')];
    const [num, setNum] = useState(10);
    const {
        topRectHeight,
        bottomRectHeight,
        orientation,
        cutoutMargin,
        isHighDevice,
        isWideDevice,
        isStoreNeedAvoid
    } = useAvoidArea();

    return (
        <>
            <View style={styles.bgImage}>
                <Image source={require('../asset/game_bg.png')} style={[styles.image, styles.bgImage]}></Image>
            </View>
            <View style={[styles.container, { paddingTop: topRectHeight, paddingBottom: bottomRectHeight }]}>
                {!isWideDevice && <View style={[styles.top, { justifyContent: 'space-between' }]}>
                    <Image source={require('../asset/aim.png')} style={[styles.image, { marginLeft: orientation === 'leftRect' ? cutoutMargin : 0 }]}></Image>
                    {isStoreNeedAvoid && <Image source={require('../asset/store.png')} style={styles.image} ></Image>}
                    <Image source={require('../asset/step.png')} style={[styles.image, { marginRight: orientation === 'topRect' ? cutoutMargin : 0 }]}></Image>
                </View>}
                {isWideDevice && isHighDevice && <View style={[styles.top]}>
                    <Image source={require('../asset/aim.png')} style={[styles.image, { marginLeft: orientation === 'leftRect' ? cutoutMargin : 0, marginRight: 24 }]}></Image>
                    {isWideDevice && <Image source={require('../asset/star.png')} style={styles.image} ></Image>}
                    <Image source={require('../asset/step.png')} style={[styles.image, { marginRight: orientation === 'topRect' ? cutoutMargin : 0 }]}></Image>
                </View>}
                {!isHighDevice && isWideDevice && <View style={styles.top}>
                    <View style={styles.flex}>
                        <Image source={require('../asset/aim.png')} style={[styles.image, { marginRight: 16 }]}></Image>
                        <Image source={require('../asset/step.png')} style={styles.image} ></Image>
                    </View>
                    <View style={styles.flex}>
                        <Image source={require('../asset/store.png')} style={[styles.image, { marginRight: 16 }]}></Image>
                        <Image source={require('../asset/props.png')} style={[styles.image, { marginRight: 16 }]}></Image>
                        <Image source={require('../asset/stop.png')} style={styles.image} ></Image>
                    </View>
                </View>}
                <View style={[styles.middleBox, { marginLeft: orientation === 'leftRectMiddle' ? cutoutMargin : 0, marginRight: orientation === 'rightRectMiddle' ? cutoutMargin : 0 }]} onLayout={(event): void => {
                    const { width, height } = event.nativeEvent.layout;
                    let num = Math.floor(width / 80) * Math.floor(height / 80);
                    setNum(num);
                }}>
                    {Array.from({ length: num }).map((_, index) => {
                        const randomIndex = Math.floor(Math.random() * localImages.length);
                        return (
                            <View style={styles.centerBox} key={`item-${index}`}>
                                <Image source={require('../asset/square.png')} style={styles.image} ></Image>
                                <Image source={localImages[randomIndex]} style={styles.birdImage}></Image>
                            </View>
                        );
                    })}
                </View>
                {!isWideDevice && <View style={[styles.bottom, { justifyContent: 'space-between' }]}>
                    <Image source={require('../asset/stop.png')} style={styles.image}></Image>
                    {!isStoreNeedAvoid && <Image source={require('../asset/store.png')} style={styles.image}></Image>}
                    <Image source={require('../asset/props.png')} style={styles.image}></Image>
                </View>}
                {isWideDevice && isHighDevice && <View style={[styles.top, { marginBottom: 16 }]}>
                    <Image source={require('../asset/stop.png')} style={[styles.image, { marginLeft: orientation === 'bottomRect' ? cutoutMargin : 0 }]}></Image>
                    <View style={[styles.flex]}>
                        <Image source={require('../asset/store.png')} style={[styles.image, { marginRight: 24 }]}></Image>
                        <Image source={require('../asset/props.png')} style={[styles.image, { marginRight: orientation === 'rightRect' ? cutoutMargin : 0 }]}></Image>
                    </View>
                </View>}
            </View>
        </>
    );
};
const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        marginTop: 4
    },
    bgImage: {
        width: '100%',
        height: '100%',
        position: 'absolute',
        resizeMode: 'stretch'
    },
    top: {
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row',
        paddingLeft: 16,
        paddingRight: 16
    },
    middleBox: {
        flex: 1,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignContent: 'center',
        flexWrap: 'wrap'
    },
    centerBox: {
        width: 68,
        height: 67,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        margin: 6
    },
    image: {
        resizeMode: 'contain'
    },
    birdImage: {
        position: 'absolute',
    },
    bottom: {
        width: '100%',
        height: 'auto',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-evenly',
        alignItems: 'flex-end',
        padding: 16,
        paddingTop: 0
    },
    margin: {
        margin: 5
    },
    input: {
        height: 40,
        margin: 12,
        borderWidth: 1,
        padding: 10
    },
    flex: {
        display: 'flex',
        flexDirection: 'row'
    }
});
export default GamePage;
